@()
@main("QTLs-CBGD") {

	<div class="row">
		<div class="form-group col-sm-12">
			<h2 class="page-heading"
			style="text-align: left;
				border-bottom: 5px solid #e9f3f4">QTLs</h2>
		</div>
	</div>

	<label>Select the columns to display:</label>
	<div id="checkbox" class="checkbox">

	</div>

	<div id="toolbar">
			&nbsp;Keyword：
	</div>

	<table class="display table table-bordered" id="table" data-pagination="true" data-search="true"
	data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100, all]" data-search-align="left" data-multiple-search="true"
	style="table-layout: fixed;
		word-wrap: break-word"
	>
		<thead>
			<tr>
				<th data-field="attributeName" data-sortable="true">Attribute Name</th>
				<th data-field="chr" data-sortable="true">Chr</th>
				<th data-field="position" data-sortable="true">Position</th>
				<th data-field="leftMarker" data-sortable="true">Left Marker</th>
				<th data-field="rightMarker" data-sortable="true">Right Marker</th>
				<th data-field="lod" data-sortable="true">LOD</th>
				<th data-field="pve" data-sortable="true">PVE(%)</th>
				<th data-field="add" data-sortable="true">Add</th>
				<th data-field="dom" data-sortable="true">Dom</th>
			</tr>
		</thead>
	</table>

	<hr>

	<h4>Umami site:</h4>
	<table class="display table table-bordered" id="umamiSiteTable" data-pagination="true" data-search="true"
	 data-page-list="[10, 25, 50, 100, all]" data-search-align="left" data-multiple-search="true"
	>
		<thead>
			<tr>
				<th >Marker</th>
				<th >Chr</th>
				<th >Pos</th>
				<th >SNP</th>
				<th >Favored allele</th>
				<th >p</th>
				<th colspan="2">LOD</th>
				<th colspan="2">MarkerR<sup>2</sup></th>
			</tr>
			<tr>
				<th data-field="marker" ></th>
				<th data-field="chr" ></th>
				<th data-field="pos" ></th>
				<th data-field="snp" ></th>
				<th data-field="all" ></th>
				<th data-field="p" ></th>
				<th data-field="lodp" data-sortable="true">MLM(PCA+K)</th>
				<th data-field="lodq" data-sortable="true">MLM(Q+K)</th>
				<th data-field="markerp" data-sortable="true">MLM(PCA+K)</th>
				<th data-field="markerq" data-sortable="true">MLM(Q+K)</th>
			</tr>
		</thead>
	</table>

	<hr>
	<h4>Bitter Taste:</h4>
	<table class="display table table-bordered" id="bitterTasteTable" data-pagination="true" data-search="true"
	data-page-list="[10, 25, 50, 100, all]" data-search-align="left" data-multiple-search="true"
	>
		<thead>
			<tr>
				<th data-field="qtl">QTL</th>
				<th data-field="lg">LG</th>
				<th data-field="fmarker">Flanking marker</th>
				<th data-field="gposition">Genetic Position</th>
				<th data-field="lod">LOD</th>
				<th data-field="r">R<sup>2</sup>(%)</th>
			</tr>
		</thead>
	</table>

	<hr>
	<table class="display table table-bordered" id="otherTable"
	>
		<thead>
			<tr>
				<th >标记名</th>
				<th >连锁群</th>
				<th >遗传距离</th>
				<th >关联的性状</th>
				<th >关联的基因</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>GPDS<sub>ATG/CTC75</sub></td>
				<td></td>
				<td>9.6 cM</td>
				<td>抗白粉病</td>
				<td>白粉病抗性基因</td>
			</tr>
		</tbody>
	</table>



	<script>
			$(function () {
				var array = ["Chr", "Position", "Left Marker", "Right Marker", "LOD", "PVE(%)", "Add", "Dom"]
				var values = ["chr", "position", "leftMarker", "rightMarker", "lod", "pve", "add", "dom"]
				var html = ""
				$.each(array, function (n, value) {
							html += "<label style='margin-right: 15px'>" +
									"<input type='checkbox' checked='checked' value='" + values[n] + "' onclick=\"setColumns('" + values[n] + "')\">" + value +
									"</label>"
						}
				);
				$("#checkbox").append(html)
				$.ajax({
					url: "@routes.GeneticMapController.getAllQtls()",
					type: "get",
					dataType: "json",
					success: function (data) {
						$('#table').bootstrapTable({
							data: data
						});
						var hiddenArray = ["dom"]
						$.each(hiddenArray, function (n, value) {
									$('#table').bootstrapTable('hideColumn', value);
									$("input:checkbox[value=" + value + "]").attr("checked", false)
								}
						);
					}
				})

				$.ajax({
					url: "@routes.GeneticMapController.getAllBitterTastes()",
					type: "get",
					dataType: "json",
					success: function (data) {
						$('#bitterTasteTable').bootstrapTable({
							data: data
						});
					}
				})


				$.ajax({
					url: "@routes.GeneticMapController.getAllUmamiSites()",
					type: "get",
					dataType: "json",
					success: function (data) {
						$('#umamiSiteTable').bootstrapTable({
							data: data
						});
					}
				})

			})

			function setColumns(value) {
				var element = $("input:checkbox[value=" + value + "]")
				if (element.is(":checked")) {
					$('#table').bootstrapTable('showColumn', value);
				} else {
					$('#table').bootstrapTable('hideColumn', value);
				}
			}
	</script>
}